<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar class="top" fixed placeholder title="网易严选">
      <template #left>
        <van-icon
          style="margin-left: 50px"
          color="#666"
          name="wap-home-o"
          size="20"
          @click="goto('/home')"
        />
      </template>
      <template #right>
        <van-icon
          style="margin-right: 10px"
          color="#666"
          name="search"
          size="20"
          @click="goto('/search')"
        />
        <van-icon
          style="margin-right: 50px"
          color="#666"
          name="shopping-cart-o"
          size="20"
          @click="goto('/cart')"
        />
      </template>
    </van-nav-bar>
    <div class="logininfo">
      <img src="../assets/loginimg/loginlogo.png" alt="" />
      <!-- 表单 -->
      <van-form>
        <van-field
          v-model="userinfo.user_name"
          name="username"
          placeholder="请输入用户名"
          :rules="rules.username"
        />
        <van-field
          v-model="userinfo.user_pwd"
          type="password"
          name="password"
          placeholder="请输入密码"
          :rules="rules.password"
        />
        <van-field
          v-model="sms"
          name="sms"
          center
          clearable
          placeholder="请输入验证码"
          :rules="rules.sms"
        >
          <template #button>
            <p
              class="sms"
              @click="vsCodes"
              v-html="vcode ? vcode : '获取验证码'"
            ></p>
          </template>
        </van-field>
        <div class="question">
          <span>遇到问题？</span>
          <p>还没注册，<a @click="goto('/reg')">先去注册？</a></p>
        </div>
        <div style="margin: 16px">
          <van-button block type="danger" @click="login" native-type="submit"
            >登录</van-button
          >
        </div>
        <van-checkbox
          name="check"
          icon-size="18px"
          v-model="checked"
          shape="square"
        >
          <span>我同意</span><a href="">《服务条款》</a><span>和</span
          ><a href="">《网易隐私政策》</a>
        </van-checkbox>
      </van-form>
      <!-- 服务条款 -->
    </div>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      checked: false,
      userinfo: {
        user_name: "",
        user_pwd: "",
      },
      sms: "",
      vcode: "",
      rules: {
        username: [{ required: true, message: "请填写用户名" }],
        password: [{ required: true, message: "请填写密码" }],
        sms: [
          { required: true, message: "请输入验证码" },
          {
            validator: this.checksms,
            message: "验证码错误",
          },
        ],
      },
    };
  },
  created() {
    // 接受过来的参数
    const { username } = this.$route.query;
    this.userinfo.user_name = username;
  },
  methods: {
    // 跳转页面
    goto(url) {
      this.$router.push(url);
    },
    // 获取验证码
    async vsCodes() {
      const { data } = await this.$request.get("/api/users/captcha");
      this.vcode = data;
    },
    // 验证验证码
    checksms(vcode) {
      return new Promise((resolve, reject) => {
        this.$request
          .get("/api/users/captcha/" + vcode)
          .then(({ data }) => {
            resolve(data.code === 1);
          })
          .catch(() => {
            reject(false);
          });
      });
    },
    ...mapMutations("user", ["log"]),
    // 登录
    async login() {
      if (!this.checked) {
        return this.$toast("请勾选服务条款");
      }
      const { data } = await this.$request.post("/api/users/login", {
        ...this.userinfo,
      });
      if (data.code === 0) {
        this.$toast("用户名或密码错误");
      } else if (data.code === 1) {
        this.$toast("登录成功");
        this.log(data.data);
        // localStorage.setItem('userinfo',JSON.stringify(data.data))
        const { targeturl = "/home" } = this.$route.query;
        this.$router.replace(targeturl);
      }
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.logininfo {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  height: 338px;
  margin-top: 30px;
  img {
    width: 100px;
    height: 33px;
  }
  .van-form {
    margin-top: 30px;
    .sms {
      height: 30px;
      width: 100px;
    }
    .question {
      padding: 10px 20px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        color: #7f7f7f;
      }
      p {
        font-size: 14px;
        color: #333;
        a {
          color: #007aff;
        }
      }
    }
  }
  .van-checkbox {
    margin-top: 20px;
    margin-left: 20px;
    span {
      color: #7f7f7f;
    }
    a {
      color: #007aff;
    }
  }
}
</style>
